<template>
  <view :class="{ line: line, weight: weight }"
        :style="{color: '#' + incolor,fontWeight: fontWeight, display:(discount || inline) ? 'inline-block' : 'block', fontFamily: line?'Futura-Light':'Futura' }"
        class="base-money">
    <text v-if="!discount" class="symbol" :style="{'font-size': symbolSize +'rpx'}">￥</text>
    <text class="integer"
          :style="{'font-size': integerSize +'rpx'}">{{ integer }}
    </text>
    <text v-if="digits && decimal != '00' && decimal != '0'" class="decimal"
          :style="{'font-size': decimalSize +'rpx'}">.{{ decimal }}
    </text>
  </view>
</template>

<script>
export default {
  name: 'BaseMoney',
  props: {
    // 小数位数，为0则不显示
    digits: {
      type: Number,
      default: 2
    },
    fontWeight: {
      type: Number | String,
      default: 'inherit'
    },
    money: {
      type: String,
      default: ""
    },
    // 删除线
    line: {
      type: Boolean,
      default: false
    },
    // 粗体
    weight: {
      type: Boolean,
      default: false
    },
    incolor: {
      type: String,
      default: '424242'
    },
    symbolSize: {
      type: String,
      default: '20'
    },
    integerSize: {
      type: String,
      default: '26'
    },
    decimalSize: {
      type: String,
      default: '24'
    },
    discount: {
      type: Boolean,
      default: false
    },
    inline: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      integer: 0,
      decimal: 0
    };
  },
  watch: {
    money: {
      handler(newValue, oldValue) {
        let value = Number(newValue).toFixed(this.digits);
        value = value.split('.');
        this.integer = value[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        if (value[1]) {
          this.decimal = (value[1].length == 2 && value[1].charAt(1) != 0) ? value[1] : (value[1].charAt(
              0) || 0);
        }

      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.base-money {
  font-family: Futura;

  &.line {
    text-decoration: line-through;
  }

  &.weight {
    font-weight: 500;
  }
}
</style>